<template>
  <a-card :bordered="false">
    <a-tabs @change="callback" type="card">
      <a-tab-pane tab="剧本登记" key="1">
        <div>
          <a-form :form="form">
            <a-row>
              <a-col :md="12" :sm="12">
                <a-form-item label="剧本类型" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-select @change="ctSelect" style="width:80%;" :value="oldVal" v-decorator="[ 'newOldStatus', validatorRules.newOldStatus]">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option v-for="(item, index) in valData" :key="index" :value="index">
                      <span style="display: inline-block;width: 100%">
                        {{ item }}
                      </span>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div v-if="!showOver">
          <a-steps :current="current" style="margin-bottom: 50px;width:60%;">
            <a-step>
              <template slot="title">
                基础信息
              </template>
              <!-- <span slot="description"></span> -->
            </a-step>
            <a-step>
              <template slot="title">
                剧本详细信息
              </template>
              <!-- <span slot="description"></span> -->
            </a-step>
            <a-step>
              <template slot="title">
                资料上传
              </template>
              <!-- <span slot="description"></span> -->
            </a-step>
          </a-steps>
          <a-form :form="form">
            <div v-show="tab1Show">
              <a-row>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" >
                  <span style="font-size: 16px;font-weight: bold;display: inline-block;margin-bottom: 30px;">基础信息</span>   
                </a-col>
              </a-row>
              <a-row>
                  <a-form-item label="剧本名称" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                    <a-input v-decorator="[ 'productName', validatorRules.productName]" placeholder="请输入剧本名称"></a-input>
                  </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="作者" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-input v-decorator="[ 'author', validatorRules.author]" placeholder="请输入作者"></a-input>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="批次" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-input v-decorator="[ 'itemPatch', validatorRules.itemPatch]" placeholder="请输入批次"></a-input>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="总量" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-input-number :min="1" v-decorator="[ 'total', validatorRules.total]" placeholder="请输入总量" style="width: 100%"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="零售价格" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-input v-decorator="[ 'wholesalePrice', validatorRules.wholesalePrice]" placeholder="请输入零售价格"></a-input>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="设置标签" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <template v-for="(tag, index) in tags">
                    <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                      <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                        {{`${tag.slice(0, 20)}...`}}
                      </a-tag>
                    </a-tooltip>
                    <a-tag v-else :key="tag" closable :afterClose="() => handleClose(tag)">
                      {{tag}}
                    </a-tag>
                  </template>
                  <a-input
                    v-if="inputVisible && showTagLen"
                    ref="input"
                    type="text"
                    size="small"
                    :style="{ width: '78px' }"
                    :value="inputValue"
                    @change="handleInputChange"
                    @blur="handleInputConfirm"
                    @keyup.enter="handleInputConfirm"
                  />
                  <a-tag v-if="!inputVisible && showTagLen" @click="showInput" style="background: #fff; borderStyle: dashed;">
                    <a-icon type="plus" /> New Tag
                  </a-tag>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="正式发行时间" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-date placeholder="请选择正式发行时间" v-decorator="[ 'publicTime', validatorRules.publicTime]" :trigger-change="true" style="width: 100%"/>
                </a-form-item>
              </a-row>
              <div style="width:100%;">            
                <Button type="primary" style='margin-left:20%;display: block;width: 20%;' @click="nextStep(0)">下一步</Button>
              </div>
            </div>
            <div v-show="tab2Show">
              <a-row>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">              
                  <span style="font-size: 16px;font-weight: bold;display: inline-block;margin-bottom: 30px;">剧本详细信息</span>  
                </a-col>
              </a-row>
              <a-row>
                <a-form-item label="剧本人数" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-select defaultValue="" style="width:20%;" v-model="manSel">
                    <a-select-option v-for="(vals,index) in listPerson" :key="vals.val" :value="index">{{vals.name}}</a-select-option>
                  </a-select>
                  <div style="display: inline-block;" v-if="manSel == 0">
                    <a-input-number :min="1" placeholder="剧本人数" v-model="detailNum1" style="width: 50%;margin-left:10%;"/> 人
                  </div>
                  <div style="display: inline-block;width:76%;" v-if="manSel == 1">
                    <div style="display: inline-block;margin-left:10%;width: 35%;">
                      男 <a-input-number :min="1" placeholder="剧本人数(男)" v-model="detailNum2" style="width: 60%;"/> 人
                    </div>
                    <div style="display: inline-block;margin-left:10%;width: 35%;">
                      女 <a-input-number :min="1" placeholder="剧本人数(女)" v-model="detailNum3" style="width: 60%;"/> 人
                    </div>
                  </div>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="剧本简介" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-textarea v-decorator="[ 'detailInfo', validatorRules.detailInfo]" placeholder="请输入剧本简介" style="width: 100%"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="一句话简介" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-textarea v-decorator="[ 'productInfo', validatorRules.productInfo]" placeholder="请输入一句话简介" style="width: 100%"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="剧本实景" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-dict-select-tag type="radio" v-decorator="['playReality', validatorRules.playReality]" :trigger-change="true" dictCode="play_reality" placeholder="请选择剧本实景"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="剧本形式" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-multi-select-tag type="checkbox" v-decorator="['playbillForm', validatorRules.playbillForm]" :trigger-change="true" dictCode="playbiil_form" placeholder="请选择剧本形式"/>
                  <span style="display: block;color: red;">前三者三选一，后三者三选一</span>   
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="剧本类型" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-multi-select-tag type="checkbox" v-decorator="['playbillType', validatorRules.playbillType]" :trigger-change="true" dictCode="playbill_type" placeholder="请输入剧本类型"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="适合人群" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-multi-select-tag type="checkbox" v-decorator="['belongtoCrowd', validatorRules.belongtoCrowd]" :trigger-change="true" dictCode="belongto_crowd" placeholder="请选择适合人群"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="游戏时间" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <a-input-number :min="1" v-decorator="[ 'playTime', validatorRules.playTime]" placeholder="请输入游戏时间"/>小时
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="道具支持" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-dict-select-tag type="radio" v-decorator="['propStatus', validatorRules.propStatus]" :trigger-change="true" dictCode="prop_status" placeholder="请选择道具支持"/>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="剧本供应买断状态" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                <j-dict-select-tag type="radio" v-decorator="['buyoutStatus', validatorRules.buyoutStatus]" :trigger-change="true" dictCode="buyout_status" placeholder="请选择买断状态"/>
              </a-form-item>
              </a-row>
              <div style="width:100%;">
                <Button type="primary" style='margin-left: 10%;width: 12%;display: inline-block;' @click="nextStep(3)">上一步</Button>
                <Button type="primary" style='margin-left: 10%;width: 12%;display: inline-block;' @click="nextStep(1)">下一步</Button>
              </div>
            </div>
            <div v-show="tab3Show">
              <a-row>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                  <span style="font-size: 16px;font-weight: bold;display: inline-block;margin-bottom: 30px;">资料上传</span>  
                </a-col>
              </a-row>
              <a-row>
                <a-form-item label="剧本实拍图" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-upload v-decorator="['productImages', validatorRules.productImages]" :trigger-change="true"></j-upload>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="剧本海报" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-upload v-decorator="['playbillPoster', validatorRules.playbillPoster]" :trigger-change="true"></j-upload>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="人物海报" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-upload v-decorator="['personPoster', validatorRules.personPoster]" :trigger-change="true"></j-upload>
                </a-form-item>
              </a-row>
              <a-row>
                <a-form-item label="道具资料" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                  <j-upload v-decorator="['propData', validatorRules.propData]" :trigger-change="true"></j-upload>
                </a-form-item>
              </a-row>
              <div style="width:100%;">
                <Button type="primary" style='margin-left: 2%;width: 12%;display: inline-block;' @click="nextStep(4)">上一步</Button>
                <Button type="primary" :disabled="showSub" style='margin-left: 7%;display: inline-block;width: 13%;' @click="handleOk">提交</Button>
              </div>
            </div>
          </a-form>
        </div>
        <div v-if="showOver">
          <a-form :form="form">
            <a-row v-show="newProductShow">
              <a-col :md="12" :sm="8">
                <a-form-item label="在售剧本" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft" >
                  <a-select style="width:80%;" v-decorator="[ 'oldStandardid', validatorRules.oldStandardid]">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option v-for="(item, index) in specification" :key="index" :value="item.id">
                      <span style="display: inline-block;width: 100%">
                        {{ item.productName }}
                      </span>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="8">
                <Button type="primary" :disabled="showSub" style='margin-left: 7%;display: inline-block;width: 30%;' @click="handleOkold">提交</Button>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="预售转在售" key="2">
        <a-row>
          <a-col :md="6" :sm="8">
              <a-select style="width:80%;" v-model="selFuterVal">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in specificationFuter" :key="index" :value="item.id">
                  <span style="display: inline-block;width: 100%">
                    {{ item.productName }}
                  </span>
                </a-select-option>
              </a-select>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="12" :sm="8">
            <Button type="primary" style='margin-top:20px;margin-left: 7%;display: inline-block;width: 30%;' @click="handleOkFuter">提交</Button>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>

  import { httpAction, getAction,postAction,putAction } from '@/api/manage'
  import { Button } from 'ant-design-vue';
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'  
  import JUpload from '@/components/jeecg/JUpload'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"

  export default {
    name: "Exhibition_addGoodsList",
    components: {
      JDate,
      JUpload,
      JDictSelectTag,
      JMultiSelectTag,
      Button
    },
    data () {
      return {
        specification:[],
        specificationFuter:[],
        selFuterVal:"",
        newProductShow:true,
        oldVal:0,
        showOver:true,
        current: 0,
        tags: [],
        inputVisible: false,
        showTagLen:true,
        inputValue: '',
        showSub:false,
        tab1Show:true,
        tab2Show:false,
        tab3Show:false,
        form: this.$form.createForm(this),
        title:"操作",
        width:"100%",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        manSel:0,
        detailNum1:"",
        detailNum2:"",
        detailNum3:"",
        valData:["在售剧本","预售剧本"],
        listPerson:[{
          name:"男女不限",
          val:"1"
        },{
          name:"男女有限制",
          val:"2"
        }],
        validatorRules: {
          id: {rules: [
            {required: true, message: '请选择预售剧本类型!'},
          ]},
          newOldStatus: {rules: [
            {required: true, message: '请选择剧本类型!'},
          ]},
          oldStandardid: {rules: [
            {required: true, message: '请选择在售剧本!'},
          ]},
          productName: {rules: [
            {required: true, message: '请输入剧本名称!'},
          ]},
          itemPatch: {rules: [
            {required: true, message: '请输入剧本批次!'},
          ]},
          itemType: {rules: [
          ]},
          total: {rules: [
            {required: true, message: '请输入总量!'},
          ]},
          saleTotal: {rules: [
          ]},
          catalogId: {rules: [
          ]},
          labelTags: {rules: [
          ]},
          author: {rules: [
          ]},
          productInfo: {rules: [
          ]},          
          playReality: {rules: [
          ]},
          wholesalePrice: {rules: [
          ]},
          itemCode: {rules: [
          ]},
          detailInfo: {rules: [
          ]},
          productImages: {rules: [
          ]},
          playbillPoster: {rules: [
            // {required: true, message: '请上传剧本海报!'},
          ]},
          personPoster: {rules: [
            // {required: true, message: '请上传人物海报!'},
          ]},
          publicTime: {rules: [
            // {required: true, message: '请选择正式发行时间!'},
          ]},
          proPublicTime: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          preSaleTotal: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          preWholesalePrice: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          playbillForm: {rules: [
            // {required: true, message: '请选择剧本形式!'},
          ]},
          playbillType: {rules: [
            // {required: true, message: '请输入剧本类型!'},
          ]},
          playbillBackground: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          belongtoCrowd: {rules: [
            // {required: true, message: '请选择适合人群!'},
          ]},
          playTime: {rules: [
            // {required: true, message: '请输入游戏时间!'},
          ]},
          sendgoodTime: {rules: [
          ]},
          supportLogistics: {rules: [
          ]},
          propStatus: {rules: [
            // {required: true, message: '请选择道具支持!'},
          ]},
          propData: {rules: [
            // {required: true, message: '请上传道具资料!'},
          ]},
          buyoutStatus: {rules: [
            {required: true, message: '请选择买断状态!'},
          ]},
        },
        url: {
          add: "/exhibition/exhibition_product_standards_new/add",
          sub: "/exhibition/exhibition_product_standards_new/preSaleToSale"
        }
        
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    mounted() {
      var param={
          productStandardsId: "1216548480059949057",
          order: "asc",
          field: "",
          pageNo: 1,
          pageSize: 1000
        };
        getAction("/block/blockProductStandards/list",param).then((res) => {
          if (res.success) {
            this.specification = res.result.records;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
        })
    },
    watch:{
      tags(val){
        if(val.length>5){
          this.showTagLen = false;
        }else{
          this.showTagLen = true;
        }
      }
    },
    methods: {
      callback(key){
        if(key == 1){
          var param={
            productStandardsId: "1216548480059949057",
            order: "asc",
            field: "",
            pageNo: 1,
            pageSize: 1000
          };
          getAction("/block/blockProductStandards/list",param).then((res) => {
            if (res.success) {
              this.specification = res.result.records;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
          })
        }
        if(key == 2){
          getAction("exhibition/exhibition_product_standards_new/getShowData").then((res) => {
            if (res.success) {
              this.specificationFuter = res.result;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
          })
        }
      },
      handleOkFuter(){
        if(this.selFuterVal){
          putAction(this.url.sub,{id:this.selFuterVal}).then((res) => {
            if(res.success){
              this.$message.success(res.message);
            }else{
              this.$message.warning(res.message);
            }
          })
        }else{
          this.$message.warning("请选择预售剧本类型!");
        }
      },
      handleOkold(){
        this.form.validateFields((err, values) => {
          if (!err) {
            postAction(this.url.add,values).then((res) => {
              this.current = 0;
              if(res.success){
                this.$message.success(res.message);
              }else{
                this.$message.warning(res.message);
              }
            })
          }         
        })
      },
      ctSelect(value){
        this.oldVal = value;
        if(value == 0){
          this.newProductShow = true;
          this.showOver = true;
        }
        if(value == 1){
          this.newProductShow = false;
          this.showOver = false;
        }
      },
      handleClose(removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag);
        this.tags = tags;
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(function() {
          this.$refs.input.focus();
        });
      },

      handleInputChange(e) {
        this.inputValue = e.target.value;
      },

      handleInputConfirm() {
        const inputValue = this.inputValue;
        let tags = this.tags;
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue];
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: '',
        });
      },
      nextStep(num){
        const that = this;
        // 触发表单验证
        if(num == 3){
          this.tab1Show = true;
          this.tab2Show = false;
          this.current = 0;
        }
        if(num == 4){
          this.tab2Show = true;
          this.tab3Show = false;
          this.current = 1;
        }
        if(num == 0){
          if (this.form.getFieldValue('productName') && this.form.getFieldValue('total')) {            
            this.tab1Show = false;
            this.tab2Show = true;
            this.current = 1;
          }else{
            this.form.validateFields((err, values) => {
            })
          }
        }    
        if(num == 1){
          if(this.form.getFieldValue('playbillForm')){
            if(this.form.getFieldValue('playbillForm').indexOf("1,2")!=-1 || this.form.getFieldValue('playbillForm').indexOf("1,3")!=-1 || this.form.getFieldValue('playbillForm').indexOf("2,3")!=-1
            || this.form.getFieldValue('playbillForm').indexOf("1,2,3")!=-1 || this.form.getFieldValue('playbillForm').indexOf("4,5,6")!=-1 || this.form.getFieldValue('playbillForm').indexOf("4,5")!=-1
            || this.form.getFieldValue('playbillForm').indexOf("4,6")!=-1 || this.form.getFieldValue('playbillForm').indexOf("5,6")!=-1){
                this.$message.warning("剧本形式选择格式有误！");
                return
            }
          }
          if(this.manSel == 0 && !this.detailNum1){
            this.$message.warning("请输入剧本人数！");
            return
          }
          if(this.manSel == 1 && !this.detailNum2 && !this.detailNum3){
            this.$message.warning("请输入剧本人数！");
            return
          }
          if (this.form.getFieldValue('buyoutStatus')) {            
            this.tab2Show = false;
            this.tab3Show = true;
            this.current = 2;
          }else{
            this.form.validateFields((err, values) => {
              if(!err){
                this.tab2Show = false;      
                this.tab3Show = true;
                this.current = 2;
              }
            })
          }
        }
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.showSub = true;
            // values.catalogId = "1216548439660412929";
            // values.itemType = "1216548480059949057";
            values.shopkeeperId = "";
            var arrList="";
            for(let i=0,len=this.tags.length;i<len;i++){
              if(i == 0){
                arrList = this.tags[0];
              }else{
                arrList+=","+this.tags[i];
              }
            }
            if(arrList){
              values.labelTags = arrList;
            }
            if(this.detailNum1){
              if(this.manSel == 0){
                values.playbillNumber = this.detailNum1;
              }
              if(this.manSel == 1){
                values.playbillNumber = this.detailNum2+","+this.detailNum3;
              }
            }
            let httpurl = '';
            let method = '';
            httpurl+=this.url.add;
            method = 'post';
            values.biz_status = 1;
            httpAction(httpurl,values,method).then((res)=>{
              this.current = 0;
              if(res.success){
                that.$message.success(res.message);
              }else{
                that.$message.warning(res.message);
              }
              this.tab1Show = true;
              this.tab2Show = false;
              this.tab3Show = false;
            }).finally(() => {
              this.tab1Show = true;
              this.tab2Show = false;
              this.tab3Show = false;
            })
          }         
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  /* @import '~@assets/less/common.less' */
  .tablePlaceholder /deep/ .ant-spin-nested-loading{
    height:333px;
  }
  .tablePlaceholder /deep/ .ant-table-placeholder{
    height:277px;
  }
  .textLeft /deep/ .ant-form-item-label{
    text-align: left;
  }
</style>